<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>商城 - 积分商城</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    /* 商城特有样式 */
    .category-sidebar {
      position: fixed;
      left: 0;
      top: 50px;
      bottom: 50px;
      width: 25%;
      overflow-y: auto;
      background: #f8f8f8;
      border-right: 1px solid #eee;
    }
    
    .category-item {
      padding: 15px 10px;
      text-align: center;
      font-size: 13px;
      border-bottom: 1px solid #eee;
    }
    
    .category-item.active {
      background: white;
      color: #ff5e57;
      font-weight: bold;
      border-left: 3px solid #ff5e57;
    }
    
    .product-content {
      margin-left: 25%;
      padding: 10px;
    }
    
    .search-bar {
      position: sticky;
      top: 0;
      z-index: 10;
    }
    
    .filter-bar {
      display: flex;
      background: white;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    
    .filter-item {
      flex: 1;
      text-align: center;
      font-size: 13px;
      color: #666;
    }
    
    .filter-item.active {
      color: #ff5e57;
    }
  </style>
</head>
<body>
<div class="app-container">
  <!-- 搜索栏 -->
  <div class="search-bar">
    <div class="search-box">
      <span class="search-icon">🔍</span>
      <input type="text" class="search-input" placeholder="搜索商品...">
    </div>
  </div>

  <!-- 分类侧边栏 -->
  <div class="category-sidebar" id="categorySidebar">
    <!-- 分类将通过JavaScript动态加载 -->
  </div>

  <!-- 商品内容区 -->
  <div class="product-content">
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <div class="filter-item active">综合</div>
      <div class="filter-item">销量</div>
      <div class="filter-item">价格</div>
      <div class="filter-item">筛选</div>
    </div>

    <!-- 商品列表 -->
    <div class="product-grid" id="mallProductGrid">
      <!-- 商品将通过JavaScript动态加载 -->
    </div>
    
    <div class="load-more">
      <div class="load-more-btn" id="loadMoreBtn">点击加载更多</div>
    </div>
  </div>
</div>

<!-- 导航栏容器 -->
<div id="navbar-container"></div>

 <!-- 一次性引入合并后的JS -->
  <script src="./js/navbar-loader.js"></script>

<script src="js/common.js"></script>
<script>
  // 分类数据
  const categories = [
    { id: 1, name: "全部" },
    { id: 2, name: "手机数码" },
    { id: 3, name: "电脑办公" },
    { id: 4, name: "家用电器" },
    { id: 5, name: "食品生鲜" },
    { id: 6, name: "美妆个护" },
    { id: 7, name: "服饰鞋包" },
    { id: 8, name: "家居家装" },
    { id: 9, name: "运动户外" },
    { id: 10, name: "礼品鲜花" }
  ];

  // 商品数据 (模拟分页)
  let allMallProducts = [];
  for (let i = 1; i <= 30; i++) {
    allMallProducts.push({
      id: 1000 + i,
      name: `商品${i} 这是商品名称描述描述描述`,
      price: Math.floor(Math.random() * 1000) + 100,
      originalPrice: Math.floor(Math.random() * 1200) + 100,
      image: `https://picsum.photos/300/300?random=${1000 + i}`,
      points: Math.floor(Math.random() * 1000) + 100,
      sales: Math.floor(Math.random() * 1000)
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    const categorySidebar = document.getElementById('categorySidebar');
    const mallProductGrid = document.getElementById('mallProductGrid');
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    const filterItems = document.querySelectorAll('.filter-item');
    
    let currentCategory = 1;
    let currentPage = 1;
    const itemsPerPage = 8;
    let currentSort = 'default';

    // 渲染分类
    function renderCategories() {
      categorySidebar.innerHTML = '';
      
      categories.forEach(category => {
        const item = document.createElement('div');
        item.className = `category-item ${category.id === currentCategory ? 'active' : ''}`;
        item.textContent = category.name;
        item.dataset.id = category.id;
        
        item.addEventListener('click', () => {
          currentCategory = category.id;
          currentPage = 1;
          renderCategories();
          renderProducts();
        });
        
        categorySidebar.appendChild(item);
      });
    }

    // 渲染商品
    function renderProducts() {
      mallProductGrid.innerHTML = '';
      
      // 模拟分类筛选
      let filteredProducts = currentCategory === 1 
        ? allMallProducts 
        : allMallProducts.filter(p => p.id % 10 === currentCategory % 10);
      
      // 排序
      filteredProducts = sortProducts(filteredProducts, currentSort);
      
      // 分页
      const productsToShow = filteredProducts.slice(0, currentPage * itemsPerPage);
      
      if (productsToShow.length === 0) {
        mallProductGrid.innerHTML = '<div style="text-align:center;padding:50px;color:#999">暂无商品</div>';
        loadMoreBtn.style.display = 'none';
        return;
      }
      
      productsToShow.forEach(product => {
        const card = document.createElement('div');
        card.className = 'product-card fade-in';
        card.innerHTML = `
          <div class="product-image-container">
            <img src="${product.image}" alt="${product.name}" class="product-image" loading="lazy">
          </div>
          <div class="product-info">
            <div class="product-title">${product.name}</div>
            <div class="product-price">
              <span class="product-current-price">¥${product.price.toLocaleString()}</span>
              <span class="product-original-price">¥${product.originalPrice.toLocaleString()}</span>
            </div>
            <div class="product-points">可用${product.points}积分抵扣</div>
            <div style="font-size:12px;color:#999;margin-top:5px;">销量 ${product.sales}</div>
          </div>
        `;

        card.addEventListener('click', () => {
          showProductDetail(product);
        });

        mallProductGrid.appendChild(card);
      });
      
      // 控制"加载更多"按钮显示
      if (filteredProducts.length <= currentPage * itemsPerPage) {
        loadMoreBtn.textContent = "没有更多了";
        loadMoreBtn.style.opacity = "0.6";
        loadMoreBtn.disabled = true;
      } else {
        loadMoreBtn.textContent = "点击加载更多";
        loadMoreBtn.style.opacity = "1";
        loadMoreBtn.disabled = false;
      }
    }
    
    // 商品排序
    function sortProducts(products, sortType) {
      switch(sortType) {
        case 'sales':
          return [...products].sort((a, b) => b.sales - a.sales);
        case 'price-asc':
          return [...products].sort((a, b) => a.price - b.price);
        case 'price-desc':
          return [...products].sort((a, b) => b.price - a.price);
        default:
          return [...products];
      }
    }

    // 初始化
    renderCategories();
    renderProducts();
    
    // 加载更多
    loadMoreBtn.addEventListener('click', () => {
      currentPage++;
      renderProducts();
    });
    
    // 筛选点击
    filterItems.forEach(item => {
      item.addEventListener('click', () => {
        filterItems.forEach(i => i.classList.remove('active'));
        item.classList.add('active');
        
        switch(item.textContent) {
          case '销量':
            currentSort = 'sales';
            break;
          case '价格':
            currentSort = 'price-asc';
            item.textContent = '价格 ↓';
            // 点击价格时切换排序方向
            item.addEventListener('click', function toggleSort() {
              if (currentSort === 'price-asc') {
                currentSort = 'price-desc';
                item.textContent = '价格 ↑';
              } else {
                currentSort = 'price-asc';
                item.textContent = '价格 ↓';
              }
              renderProducts();
            }, { once: true });
            break;
          default:
            currentSort = 'default';
        }
        
        currentPage = 1;
        renderProducts();
      });
    });
  });
</script>
</body>
</html>